<template>
  <div class="home-container">
    <div class="banner">
      <h1 class="banner-title">相册</h1>
    </div>


    <div class="maincontainer">
      <div class="container" v-for="item in phlink1" :key="item.objname">
        <div class="item-active">
          <img :src="item.imgurl" alt="" />
          <span>{{ item.objname }}</span>
        </div>
      </div>
    </div>

   
  </div>
</template>

<script>
export default {
  name: "Photo",
  data() {
    return {
      phlink1: [
        {
          imgurl:
            "http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E5%8D%97%E7%93%9C%E8%BD%A6.jpg",
          objname: "南瓜车",
        },
        {
          imgurl:
            "http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E5%89%83%E9%A1%BB%E5%88%80.jpg",
          objname: "剃须刀",
        },
        {
          imgurl:
            "http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E7%8E%A9%E5%81%B6.jpg",
          objname: "玩偶",
        },
        {
          imgurl:
            "http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E6%A1%B6.jpg",
          objname: "酒桶",
        },
        {
          imgurl:
            "http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E8%A1%80%E5%8E%8B%E8%AE%A1%E5%89%8D.jpg",
          objname: "血压仪前",
        },
        {
          imgurl:
            "http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E8%A1%80%E5%8E%8B%E8%AE%A1%E5%90%8E.jpg",
          objname: "血压仪后",
        },
        {
          imgurl:
            "http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E5%A4%B4%E9%AA%A8.jpg",
          objname: "头骨",
        },
        {
          imgurl:
            "http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E5%B0%8F%E5%B1%8B%E5%AD%90.jpg",
          objname: "小屋",
        },
        {
          imgurl:
            "http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E6%9E%AA.jpg",
          objname: "枪",
        },
        {
          imgurl:
            "http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E6%A8%A1%E5%9E%8B/%E7%9B%BE.jpg",
          objname: "盾牌",
        },
        
      ],

    };
  },
  methods: {},
  mounted() {},
};
</script>

<style scoped>

.item-active {
  flex: 1;
  overflow: hidden;
  /* background-color: #fff; */
  margin: 0 10px;
  border: 10px #fff;
  /* box-shadow: 10px 10px 20px #49b1f5; */
  border-radius: 10px;
  transition: all 0.5s;
}
.item-active > img {
  object-fit: cover;
  /* object-position: center; */
  /* width: 90%;
  height: 90%; */
  width: 200px;
  height: 200px;
  transition: all 1.5s;
}
.item-active:hover {
  flex-basis: 40%;
}
.item-active:hover > img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}
.item-active span {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 24%;
  font-size: 20px;
  font-weight: 900;
  color: #eee;
  opacity: 0.7;
}

.banner {
  /* position: absolute; */
  /* background-color: #49b1f5 !important; */
  top: -60px;
  left: 0;
  right: 0;
  height: 320px;
  animation: header-effect 1s;
  opacity: 0.8;
  background: url("http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E7%B2%BE%E5%9B%BE/23.jpg")
    center center / cover no-repeat;
}
.banner-title {
  animation: title-scale 1s;
  position: relative;
  top: 11.5rem;
  padding: 0 0.5rem;
  width: 100%;
  font-size: 2.5rem;
  text-align: center;
  color: #eee;
}
.home-container {
  z-index: -9;
  /* height: 100%; */
  height: 320vh;
  width: 100%;
  /* overflow: auto; */
  /* overflow-y: scroll; */
  /* position: absolute; */
}
.maincontainer {
  display: flex;
  justify-content: center;

  flex-wrap: wrap;

  align-items: center;
  height: 55vh;
  margin-top: 54px;
}
.container {
  display: flex;
  width: 20%;
  max-width: 960px;

  /* height: 400px; */
  height: 100%;
  /* justify-content: center; */
  align-items: center;
  padding: 5px;
}
</style>
